:root{
      --accent:#d21415;
      --card-h:64px;
      --card-radius:14px;
      --card-shadow: 0 8px 18px rgba(16,24,40,0.15), inset 0 -6px 18px rgba(0,0,0,0.12);
      --overlay: linear-gradient(0deg, rgba(0,0,0,0.46), rgba(0,0,0,0.16));
      --arrow-bg: rgba(255,255,255,0.15);
    }

    /* map area */
    .map-wrap{
      position:relative;
      width:100%;
      max-width:1200px;
      height:520px;
      margin: 0 auto;
      /* subtle left indent like reference */
      padding-left:40px;
      box-sizing:border-box;
    }

    /* pinned cards container */
    .pin {
      position:absolute;
      display:block;
      height:var(--card-h);
      padding:0 20px;
      border-radius:var(--card-radius);
      box-shadow: var(--card-shadow);
      overflow:hidden;
      color:#fff;
      min-width:220px;
      display:flex;
      align-items:center;
      gap:16px;
      text-decoration:none;
      align-items:center;
      background-size:cover;
      background-position:center;
      -webkit-backdrop-filter: blur(0.5px);
      backdrop-filter: blur(0.5px);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .pin::before{
      content:"";
      position:absolute;
      inset:0;
      background: var(--overlay);
      z-index:0;
      pointer-events:none;
    }

    .pin .label{
      z-index:2;
      font-size:20px;
      font-weight:600;
      letter-spacing:0.2px;
    }

    .pin .arrow {
      z-index:2;
      margin-left:auto;
      width:36px;
      height:36px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--arrow-bg);
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      backdrop-filter: blur(2px);
      flex-shrink:0;
      margin-right:8px;
    }
    .pin .arrow svg{ width:14px; height:14px; opacity:0.95; }

    /* hover pop */
    .pin:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 36px rgba(16,24,40,0.18);
      cursor:pointer;
    }

    /* --- precise positions to mimic the JPG --- */
    /* row/order names chosen to match visual staircase */
    .pin.ireland  { left: 18%;  top: 6%;  min-width:260px; background-size: cover; background-image: url('../images/countries/ireland.webp'); background-position: 0% 50%; }
    .pin.usa      { left: 10%;  top: 20%; min-width:260px; background-size: cover; background-image: url('../images/countries/usa.webp'); background-position: 10% 28%; }
    .pin.canada   { left: 33%;  top: 20%; min-width:240px; background-size: cover; background-image: url('../images/countries/canada.webp'); background-position: 36% 26%; }
    .pin.germany  { left: 22%;  top: 34%; min-width:300px; background-size: cover; background-image: url('../images/countries/germany.webp'); background-position: 14% 42%; }
    .pin.dubai    { left: 48%; top: 34%; min-width:210px; background-size: cover; background-image: url('../images/countries/dubai.webp'); background-position: 44% 50%; }
    .pin.hongkong { left: 66.2%;  top: 34%; min-width:260px; background-size: cover; background-image: url('../images/countries/hongkong.webp'); background-position: 62% 30%; }
    .pin.australia{ left: 16%;  top: 48%; min-width:260px; background-size: cover; background-image: url('../images/countries/australia.webp'); background-position: 8% 62%; }
    .pin.singapore{ left: 38.8%; top: 48%; min-width:240px; background-size: cover; background-image: url('../images/countries/singapore.webp'); background-position: 36% 60%; }
    .pin.france   { left: 59.9%; top: 48%; min-width:220px; background-size: cover; background-image: url('../images/countries/france.webp'); background-position: 52% 58%; }
    .pin.italy    { left: 79%;  top: 48%; min-width:240px; background-size: cover; background-image: url('../images/countries/italy.webp'); background-position: 76% 58%; }
    .pin.uk       { left: 50%;  top: 62%; min-width:200px; background-size: cover; background-image: url('../images/countries/uk.webp'); background-position: 36% 74%; }
    .pin.malaysia { left: 67.8%;  top: 62%; min-width:240px; background-size: cover; background-image: url('../images/countries/malaysia.webp'); background-position: 62% 74%; }
    .pin.netherlands { left: 55%; top: 76%; min-width:300px; background-size: cover; background-image: url('../images/countries/netharland.webp'); background-position: 48% 86%; }

    /* small-screen responsiveness */
    @media (max-width:1100px){
      :root{ --card-h:56px; }
      .map-wrap{ height:660px; padding-left:24px; }
    }
    @media (max-width:880px){
      body{ padding:12px 12px 60px; }
      .hero h1{ font-size:22px; }
      .map-wrap{ height:900px; max-width:900px; }
      .pin{ min-width:200px; height:56px; padding:0 14px; border-radius:12px; }
      /* scale positions a bit */
      .pin.ireland{ left:14%; top:6%;}
      .pin.usa{ left:6%; top:22%;}
      .pin.canada{ left:28%; top:22%;}
      .pin.germany{ left:6%; top:36%;}
      .pin.dubai{ left:30%; top:38%;}
      .pin.hongkong{ left:56%; top:36%;}
      .pin.australia{ left:4%; top:52%;}
      .pin.singapore{ left:26%; top:54%;}
      .pin.france{ left:48%; top:52%;}
      .pin.italy{ left:68%; top:52%;}
      .pin.uk{ left:36%; top:66%;}
      .pin.malaysia{ left:58%; top:66%;}
      .pin.netherlands{ left:40%; top:80%; min-width:260px; }
    }
    @media (max-width:520px){
      .map-wrap{ height:1200px; max-width:420px; margin-left:auto;margin-right:auto;}
      .pin{ min-width:100%; left:5% !important; right:5% !important; transform:none !important; }
      /* stagger vertically for narrow screens */
      .pin.ireland{ top:6%; left:5%; right:5%; }
      .pin.usa{ top:18%; left:5%; }
      .pin.canada{ top:30%; left:5%; }
      .pin.germany{ top:42%; left:5%; }
      .pin.dubai{ top:54%; left:5%; }
      .pin.hongkong{ top:66%; left:5%; }
      .pin.australia{ top:78%; left:5%; }
      .pin.singapore{ top:90%; left:5%; }
      .pin.france{ top:102%; left:5%; }
      .pin.italy{ top:114%; left:5%; }
      .pin.uk{ top:126%; left:5%; }
      .pin.malaysia{ top:138%; left:5%; }
      .pin.netherlands{ top:150%; left:5%; }
    }
    /* small visual tweak to match JPG typography */
    .pin .label { font-size:20px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }